<template>
  <div class="form-item form-item-input">
     <input :type="type" :placeholder="placeholder" :value="value" return-key-type="default" class="input" @input="oninput" />
     <text @click="hideCloseIcon" :class="['closeIcon',closeIconShow?'show':'']" style='font-family:iconfont;font-size:50;'>&#xe8dc;</text>
  </div>
</template>
<script>

module.exports = {
  props: {
    type: {
      type: String,
      required: false,
      default: 'text'
    },
    placeholder: {
      type: String,
      required: false,
      default: ''
    },
    value: {
      type: String,
      required: false,
      default: ''
    },
  },
  data: function(){
	 return {
    closeIconShow:false
    };
	},
  created:function(){

  },
  mounted: function() {
    var domModule = weex.requireModule('dom');
    //目前支持ttf、woff文件，不支持svg、eot类型,moreItem at http://www.iconfont.cn/
     domModule.addRule('fontFace', {
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_j0q7igs8xna5rk9.ttf')"
      });
  },
  methods:{
    oninput: function (event) {
      this.closeIconShow = true;
      // 通过 input 事件发出数值
      this.$emit('input', event.value)
    },
    hideCloseIcon: function () {
      this.closeIconShow = false;
      this.$emit('input', '')
    }
  }
}
</script>
<style>
/*登录模块*/
.form-item-input{
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-bottom-color:#666;
  margin-bottom: 50px;
}
.form-item{
  position: relative;
}
.closeIcon{
  position: absolute;
  right: 0px;
  top: 50%;
  height: 80px;
  margin-top: -40px;
  color: #bbb;
  visibility:hidden;
}
.input {
  font-size: 40px;
  height: 80px;
  width: 750px;
  color: #fff;
}
.show{
  visibility:visible;
}
</style>